<template>
    <el-dialog v-model="show" title="查看验收报告" width="45%" align-center @close="handleClose">
        <el-row>
            <el-col class="flex" :span="6">
                <div class="label">
                    申请日期：
                </div>
                <div>{{ props.initList.applyDate }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    采购单号：
                </div>
                <div>{{ props.initList.id }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    材料小类：
                </div>
                <div>{{ props.initList.productSubcategoryName }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    品名及规格：
                </div>
                <div>{{ props.initList.specsDetail }}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col class="flex" :span="6">
                <div class="label">
                    申请数量：
                </div>
                <div>{{ props.initList.number }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    采购数量：
                </div>
                <div>{{ props.initList.purchaseNumber }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    入库数量：
                </div>
                <div>{{ props.initList.inNumber }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    供应商：
                </div>
                <div>{{ props.initList.supplyFactoryName }}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col class="flex" :span="6">
                <div class="label">
                    抽查总数：
                </div>
                <div>{{ props.dataList.checkTotal }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    合格数：
                </div>
                <div>{{ props.dataList.qualifiedNumber }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    不合格数：
                </div>
                <div>{{ props.dataList.notQualifiedNumber }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    预计合格率：
                </div>
                <div> {{ props.dataList.qualificationRate }} </div>
            </el-col>
        </el-row>
        <el-table :data="props.dataList.dataList" style="width: 100%">
            <el-table-column prop="companyTime" label="抽查日期" align="center" />
            <el-table-column prop="companyName" label="抽查人" align="center" />
            <el-table-column prop="checkNumber" label="抽查数量" align="center" />
            <el-table-column prop="qualifiedNumber" label="合格数量" align="center" />
            <el-table-column prop="notQualifiedNumber" label="不合格数量" align="center" />
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleClose">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'dataList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.label {
    height: 32px;
    line-height: 32px;
    font-weight: 700;
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    width: 110px;
}

.flex {
    display: flex;
    align-items: center;
}

.el-form-item--default {
    margin-bottom: 0;
}

.el-row {
    margin-bottom: 20px;
}
</style>